<template>
	<view class="">
		<view class="detail">
			<view class="title">{{detail.title}}</view>
			<view class="operate">
				<view class="item">
					<image src="/static/icon/rq.png"></image><text>{{detail.add_time_date}}</text>
				</view>
				<view class="item">
					<image src="/static/icon/yd.png"></image><text>浏览{{detail.access_count}}次</text>
				</view>
			</view>
			<view class="piclist" v-if="detail.photo">
				<mul-image :imgList="detail.photo"></mul-image>
			</view>
			<view class="content">
				<rich-text :nodes="detail.content"></rich-text>
			</view>
		</view>
	</view>
	
</template>

<script>
	import mulImage from '@/components/mulImage.vue'
	export default {
		data() {
			return {
				id:1,
				detail:{}
			}
		},
		onLoad(params) {
			this.id = params.id;
			let cid=params.cid;
			let self=this;
			let cateList=uni.getStorageSync('gArtcileCategory');
			// 文章分类列表
			for (let index in cateList) {
				if (cateList[index]['id'] == cid) {
					uni.setNavigationBarTitle({
						title: cateList[index]['name']
					});
				}
			}
			
			// 获取文章详情
			let articleDetailUrl=this.requestUrl.articleDetail;
			let param={
				data:{
					id:this.id
				}
			}
			
			// 获取文章信息
			this.util.request(articleDetailUrl,'post',function(res){
				if(res.data.code==0 && res.data.data){
					self.detail=res.data.data;
				}
			},param);		
		},
		methods: {

		},

		components:{
			mulImage
		}
	}
</script>

<style scoped lang="scss">
	.detail{background: #ffffff;padding:30rpx 30rpx 80rpx;width:100%;box-sizing: border-box;}
	// 标题
	.title{font-size:$uni-font-size-lg ;color: $uni-text-color-zhu;font-weight: bold;text-align: center;}
	// 操作
	.operate{width:100%;text-align: center;color: #666666; font-size: $uni-font-size-sm;line-height: 45rpx;display: flex;flex-direction: row;justify-content: center;padding:30rpx 0}
	.operate1{justify-content: flex-end;}
	.item{margin:0 15rpx}
	.item image {
		width: 40rpx;
		height: 40rpx;
		object-fit: cover;
		float: left;
	}
	.item text{float: left;margin-left: 15rpx;}
	// 多图展示
	.piclist{padding:30rpx 40rpx;width:100%;box-sizing: border-box;}
	.description{width:100%;overflow: hidden;padding-top:30rpx}
	// 详情描述
	.content{padding:30rpx 0;line-height: 180%;}

</style>

